<template>
	<view class="content-card">
		
		<image :src="sheep.$url.cdn(data.img_url)" v-if="data.is_img==1" class="promotion-img" @click="sheep.$router.go(data.path)"></image>
		
		<view class="seckill" v-else>
			<view class="top-head">
				<view class="seckill-title">{{data.cardList[0].txt}}</view>
				<view class="seckill-desc" >限时秒杀</view>
			</view>
			<scroll-view scroll-x class="items">
				<view class="ss-flex">
					<view class="item" v-for="(item,index) in data.goodsList" :key="index" @click="goodsClick(item.id)">
						<image :src="sheep.$url.cdn(item.image)" class="items-img"></image>
						<view class="items-price">
							¥{{floatRemoveZero(item.price[0])}}
						</view>
					</view>
				</view>
				
				
			</scroll-view>
		</view>
		
		<view class="life">{{data.cardList[1].txt}}</view>
		
		<view class="group-buy">

			<view class="group-buy-item-ben"></view>
			
			<view class="group-buy-item" v-for="(item,index) in data.list" :key="index" @click="sheep.$router.go(item.url)">
				<image class="group-buy-item-img" :src="sheep.$url.cdn(item.src)"></image>
				<view class="group-buy-item-txt">{{item.title.text}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	
	import sheep from '@/sheep';
	
	const props = defineProps({
	  data: {
	    type: Object,
	    default() {},
	  },
	  
	});
	
	function floatRemoveZero(price){
		return parseFloat(price);
	}
	
	function goodsClick(id){
		sheep.$router.go('/pages/goods/index?id='+id)
	}
	
	onMounted(()=>{
	}) 
	
</script>

<style lang="scss" scoped>
	.content-card{
		position:relative;
		display:flex;
		flex-direction: row;
		justify-content: space-around;
		padding:6rpx 10rpx 0 10rpx;	
		box-sizing: border-box;
		width:100%;
		.seckill{
			display:flex;
			flex-direction: column;
			height:220rpx;
			width: calc((100% - 20rpx) / 2);
			background: #F7F7F7;
			// padding-left: 23rpx;
			// padding-right: 9rpx;
			padding-top:10rpx;
			padding-bottom:10rpx;
			.top-head{
				display:flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				
				.seckill-title{
					// height: 43rpx;
					// font-family: Source Han Sans;
					// font-size: 30rpx;
					// color: #1B1B1B;
					// margin-right: 21rpx;
					
					
					width: 120rpx;
					height: 43rpx;
					
					font-family: Source Han Sans;
					font-size: 30rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #1B1B1B;
					
					margin-right: 16rpx;
				}
				
				.seckill-desc{
					
					
					width: 109rpx;
					height: 35rpx;
					border-radius: 8rpx;
					background: linear-gradient(270deg, #F23521 10%, #FF3467 91%);
					

					
					padding-left: 7rpx;
					padding-right: 6rpx;
					
					font-family: Source Han Sans;
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #FFFFFF;
				}
				
			}
			.items{
				// justify-content: center;
				// align-items: center;
				margin-top: 12rpx;
				width: 100%;
				height: 160rpx;
				.item{
					// flex-direction: column;
					// justify-content: center;
					// align-items: center;
					margin: 0 6rpx;
					width: 110rpx;
					.items-img{
						
						width: 110rpx;
						height: 110rpx;
					}
					.items-price{
						
						margin-top:5rpx;						
						width: 120rpx;
						height: 35rpx;
						font-family: Source Han Sans;
						font-size: 24rpx;
						font-weight: 500;
						line-height: normal;
						text-align: center;
						letter-spacing: normal;
						color: #EF281B;
					}
				}
				.item:nth-child(1){
					margin-right: 9rpx;
				}
				
			}
			
		}
	
		.group-buy{
			position:relative;
			display:flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			height: 220rpx;
			background: #F7F7F7;
			padding-top:10rpx;
			padding-bottom:10rpx;
			width: calc((100% - 20rpx) / 2);
			
			.group-buy-item{
				display:flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				// padding-left:10rpx;
				width: 33%;
				.group-buy-item-img{
					max-width: 56rpx;
					width: 56rpx;
					height: 56rpx;
				}
				.group-buy-item-txt{
				
					margin-top:2rpx;
					height: 34rpx;
					font-family: Source Han Sans;
					font-size:  28rpx;
					font-weight: normal;
					line-height: normal;
					text-align: center;
					letter-spacing: normal;
					color: #1D1D1D;
				}
			}
			.group-buy-item:nth-child(3n-1){
				// margin-left: 30rpx;
				// margin-right: 30rpx;
			}
			.group-buy-item-ben{
				width: 33%;
				// height:92rpx;
				// width:55rpx;
			}
		}
		
	}
	.life{
		position:absolute;
		top:30rpx;
		left:calc(100% / 2 + 15rpx);
		z-index: 8;
		
		
		width: 120rpx;
		height: 43rpx;
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: normal;
		line-height: normal;
		text-align: center;
		letter-spacing: normal;
		color: #1B1B1B;
	}
	.promotion-img{
		height:221rpx;
		margin-right:20rpx;
		width: calc((100% - 20rpx) / 2);
	}
</style>